<template>
  <view class="page-order-det">
    <view class="ayi-sticky is-topbar">
      <view
        title="订单详情"
        color="#ffffff"
        background-color="red"
        :border="false"
      ></view>
    </view>
    <view class="top"> </view>
    <view class="body">
      <view class="status">
        <image class="s-img" src="/static/car.png" mode="aspectFill" />
        <view class="main">
          <text class="status-name">等待买家收货</text>
          <text class="tips">快件已送到，请尽快取件...</text>
        </view>
        <!-- <view class="main" v-if="flag=false">
          <text class="status-name">等待卖家发货</text>
          <text class="tips">仓库正在努力发货，请耐心等待...</text>
        </view> -->
      </view>
      <view class="goods-info1">
        <u-collapse @change="change" @close="close" @open="open" :border="false">
          <u-collapse-item
          :border="false"
				    value="查看物流"

                    title="顺丰快递"
				>
					<text slot="value" class="u-page__item__title__slot-title">自定义内容</text>
					<view class="u-collapse-content">
                    <u-steps :current="1" direction="column" v-for="(item,index) in expressdata" :key="index">
                        <text class="slot-icon" slot="icon">运</text>
                        <u-steps-item :title="item.status" :desc="item.time"></u-steps-item>
                     
                        </u-steps-item>
                    </u-steps></view>
				</u-collapse-item>
          </u-collapse-item>
        
        </u-collapse>
      </view>
      <view class="goods-info">
        <view class="title"> 商品信息 </view>
        <view class="list" v-for="(item, index) in listdata" :key="index">
          <view class="item">
            <image
              :src="item.hireinfo.thumbs_text[0]"
              mode="aspectFill"
              class="preview"
            />

            <view class="main">
              <view class="info">
                <text class="name">{{ item.hireinfo.goodsname }}</text>
                <text class="size">{{ item.hireinfo.store_text }}店</text>
              </view>
              <view class="info">
                <text class="size">{{ item.hireinfo.prop }}</text>
              </view>
              <view class="service">
                <u-tag
                  text="七天无理由"
                  plain
                  size="mini"
                  type="warning"
                ></u-tag
              ></view>
              <view class="price">
                <text class="unit">￥</text>
                <text class="num">{{ item.price }}</text>
              </view>
            </view>

            <view class="buy-num">x{{ item.pronum }}</view>
          </view>
        </view>
        <view class="delivery">
          <text class="label">配送服务</text>

          <text class="value"
            >快递 包邮 送运费险 现货，现在下单，48小时内发货</text
          >
        </view>
        <view class="discount">
          <text class="name">优惠金额</text>
          <view class="price"> ￥<text>30.00</text> </view>
        </view>
        <view class="pay">
          <text class="name">实付款</text>
          <text class="price">￥{{ count }}</text>
        </view>
      </view>
      <view class="order-info">
        <view class="title">订单信息</view>
        <view class="list">
          <view class="item">
            <text class="label">订单编号</text>
            <text class="value">{{ orderdata.code }}</text>
          </view>
          <view class="item">
            <text class="label">支付方式</text>
            <text class="value">{{ orderdata.payfs_text }}</text>
          </view>
          <view class="item">
            <text class="label">订单状态</text>
            <text class="value">{{ orderdata.status_text }}</text>
          </view>
          <view class="item">
            <text class="label">创建时间</text>
            <text class="value">{{ orderdata.createtime_text }}</text>
          </view>
        </view>
      </view>
      <view class="order-info">
        <view class="title">宝贝服务</view>
        <view class="list">
          <view class="item">
            <view class="label"><u-icon name="level"  size="23"></u-icon>
            </view>
           
            <text class="value">七天无理由退货</text>
          </view>
          <view class="item">
            <view class="label"><u-icon name="coupon-fill"  size="23"></u-icon>
            </view>
            <text class="value">免费保修一个月</text>
          </view>
       
          <view class="item">
            <view class="label"><u-icon name="plus-square-fill"  size="23"></u-icon>
            </view>
            <text class="value">免费体验7天</text>
          </view>
       
        </view>
      </view>
       
      <view class="order-pay">
        
        <view class="btn">
          
           <view class="go-pay">
            <u-button type="primary" :plain="true" size="normal"  @click="topay" text="售后评价"></u-button>
         </view>
         <view class="go-pay">
            <u-button type="warning" size="normal"  @click="topay" text="确定收货"></u-button>
         </view>
        
         
        </view>
      </view>
        <view class="uni-product-list">
      <view class="uni-product" v-for="(item, index) in prolist" :key="index" @click="toinfo(item.id)">
        <view class="image-view">
          <image class="uni-product-image" :src="item.thumbs_text[0]"></image>
        </view>
        <view class="uni-product-title">{{ item.brankname_text + item.btypename_text + item.code }}</view>
        <view class="uni-product-price">
          <text class="uni-product-price-original">￥{{ item.price }}</text>
          <!-- <text class="uni-product-price-original">{{item.price }}</text> -->
          <text class="uni-product-tip">优惠</text>
        </view>
      </view>
        </view>
    </view>
   
  </view>
</template>
<script>
export default {
  data() {
    return {
      cartids: [],
      flag: false,
      orderid: 0,
      goodsnum: 0,
      count: 0,
      listdata: [],
      prolist: [],
      list: [
        {
          preview:
            "http://luxuries.h1668.com/uploads/20231214/11704b5934985141e596d47bd1936a24.jpg",
          name: "卡地亚探险家系列Lx32332",
          size: "1件",
          price: "200",
          num: "1",
        },
        {
          preview:
            "http://luxuries.h1668.com/uploads/20231214/11704b5934985141e596d47bd1936a24.jpg",
          name: "卡地亚探险家系列Lx32332",
          size: "1个",
          price: "200",
          num: "2",
        },
      ],
      listadta: [],
      addressinfo: {},
      businessinfo: {},
      orderdata: {},
      expressdata: [],

      orderInfoList: [
        {
          label: "订单编号",
          value: "10222222",
        },
        {
          label: "支付方式",
          value: "线上支付",
        },
        {
          label: "下单时间",
          value: "2023-05-29  00:23:59",
        },
        {
          label: "发货时间",
          value: "2023-05-29  00:23:59",
        },
        {
          label: "完成时间",
          value: "2023-06-01  00:23:59",
        },
      ],
    };
  },
  computed: {
    total() {
      let total = 0;

      this.listdata.forEach((item) => {
        total += parseFloat(item.price) * parseInt(item.pronum);

        this.count = total;
      });
    },
    sum() {
      var sum = 0;

      this.listdata.forEach((item) => {
        sum += parseInt(item.pronum);

        this.goodsnum = sum;
      });
    },
  },
  onLoad(item) {
    this.businessinfo = this.$u.business.check();
    this.orderid = item.orderid ? item.orderid : 0;
    this.getaddress();
    this.getorderinfo();
    this.gethomelist();
  },
  onShow() {},
  methods: {
    open(e) {
      // console.log('open', e)
    },
    close(e) {
      // console.log('close', e)
    },
    change(e) {
      // console.log('change', e)
    },

    async orderinfo() {
      let data = {
        busid: this.businessinfo.id,
        // orderid:this.orderid
        orderid: 1,
      };

      let result = await this.$u.api.order.orderinfo(data);
      if (result.code) {
        this.orderdata = result.data;
      }
    },

    async topay() {
      // uni.showModal({
      //   title: "温馨提示",
      //   content: "确认去付款商品",
      //   cancelText: "取消",
      //   confirmText: "确定",
      //   success: (res) => {
      //     // this.createOrder()
      //     if (res.confirm) {
      //       uni.$u.route({
      //         url: "pagesC/order/order",
      //       });
      //     } else {
      //     }
      //   },
      // });

      let data = {
        busid: this.businessinfo.id,
        orderid: this.orderid,
        // orderid:61
      };

      let result = await this.$u.api.order.pullup(data);
      if (result.code) {
        uni.requestPayment({
          //下面参数为必传
          provider: "wxpay", //支付类型
          appId: result.data.appId, //小程序Appid
          timeStamp: result.data.timeStamp, //创建订单时间戳
          nonceStr: result.data.nonceStr,
          package: result.data.package, // 订单包
          signType: result.data.signType, // 加密方式统一'MD5'
          paySign: result.data.paySign, // 后台支付签名返回
          success(res) {
            if (res.errMsg === "requestPayment:ok") {
              uni.$u.route({
                url: "pagesC/order/order",
                params: {
                  orderid: result.data.orderid,
                },
              });
            }
          },
          fail(err) {
            console.log(err);
            that.$refs.notice.show({
              type: "danger",
              message: "购买失败",
              duration: 1200,
            });
          },
        });
      }
    },

    // 获取是下单的信息详情
    async getorderinfo() {
      let data = {
        busid: this.businessinfo.id,
        orderid: 1,
        // orderid:this.orderid,
      };

      let result = await this.$u.api.order.downorder(data);

      if (result.code) {
        this.listdata = result.data;

        this.orderinfo();
        this.expressinfo();
      }
    },

    // 获取个人收货地址
    async getaddress() {
      let data = {
        busid: this.businessinfo.id,
        addrid: this.businessinfo.addrid,
      };

      let result = await this.$u.api.user.AddressDefault(data);
      if (result.code) {
        this.addressinfo = result.data;
      }
    },
    async createOrder() {
      let data = {
        busid: this.businessinfo.id,
        cartids: this.cartids,
      };

      let result = await this.$u.api.order.cartadds(data);
      console.log(result);
      return false;
    },
    editshaddress(busid) {
      uni.$u.route({
        url: "pagesB/address/index",
        params: {
          busid: busid,
        },
      });
    },

    // 获取商品数据
    async gethomelist() {
      let result = await this.$u.api.product.homelist();
      if (result.code) {
        this.prolist = result.data;
      }
    },
    async expressinfo() {
      let data = {
        busid: this.businessinfo.id,
        orderid: 1,
      };

      let result = await this.$u.api.order.expresscheck(data);
      if (result.code) {
        this.expressdata = result.data;
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}
.uni-product-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
}

.uni-product {
  padding: 20upx;
  display: flex;
  flex-direction: column;
}

.image-view {
  height: 330upx;
  width: 330upx;
  margin: 12upx 0;
}

.uni-product-image {
  height: 330upx;
  width: 330upx;
}

.uni-product-title {
  width: 165px;
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.5;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.uni-product-price {
  margin-top: 10upx;
  font-size: 28upx;
  line-height: 1.5;
  position: relative;
}

.uni-product-price-original {
  color: #e80080;
}

.uni-product-price-favour {
  color: #888888;
  text-decoration: line-through;
}

.uni-product-tip {
  position: absolute;
  right: 10upx;
  background-color: #ff3333;
  color: #ffffff;
  padding: 0 10upx;
  font-size: 15px;
  border-radius: 5upx;
}
.service {
  width: 72px;
  padding-top: 5px;
  margin-left: 100px;
}

.slot-icon {
  width: 21px;
  height: 21px;
  background-color: $u-warning;
  border-radius: 100px;
  font-size: 12px;
  color: #fff;
  line-height: 21px;
  text-align: center;
}

.page-order-det {
  position: relative;
  padding-bottom: 50px;
  background-color: #ffffff;

  .top {
    width: 100%;
    height: 548rpx;
    margin-top: -44px;
    background: linear-gradient(180deg, rgb(236, 94, 94) 80%, #f7f7f7 100%);
    .address {
      z-index: 999999;
    }
  }

  .body {
    position: absolute;
    top: 150rpx;
    width: 100%;
    padding-bottom: 140rpx;

    .status {
      display: flex;
      align-items: center;
      width: calc(100% - 64rpx);
      margin: 0 32rpx 50rpx 32rpx;
      padding: 52rpx 30rpx;
      box-sizing: border-box;
      background-color: #ffffff;

      border-radius: 8rpx;

      .s-img {
        display: block;
        width: 58rpx;
        height: 58rpx;
        margin-right: 24rpx;
      }

      .status-name {
        display: block;
        font-size: 40rpx;
        font-weight: 500;
        color: #565656;
      }

      .tips {
        font-size: 24rpx;
        font-weight: 400;
        color: #ababab;
      }
    }

    .goods-info1 {
      width: calc(100% - 64rpx);
      margin: 0 32rpx 20rpx 32rpx;
      padding: 12rpx 30rpx 36rpx 30rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 8rpx;
      .address1 {
        .Box {
          display: flex;
          justify-content: space-between;

          .left {
            display: flex;
            width: 62%;
            justify-content: space-between;

            .title {
              display: flex;
              font-weight: 900;
              align-items: center;
              h1 {
                padding-left: 25px;
                font-weight: bolder;
                color: #0f0d0d !important;
              }

              .mobile {
                font-size: 14px;
                padding-left: 10px;

                color: #0f0d0d !important;
              }
            }
          }
          .right {
            font-size: 14px;
            color: #ababab;
          }
        }

        .addressinfo {
          width: 90%;
          padding: 10px 35px;
          font-size: 14px;
          color: #565656;
        }
      }
    }
    .goods-info {
      width: calc(100% - 64rpx);
      margin: 0 32rpx 20rpx 32rpx;
      padding: 52rpx 30rpx 36rpx 30rpx;
      box-sizing: border-box;
      background-color: #ffffff;

      border-radius: 8rpx;

      .title {
        font-weight: 900;

        padding-bottom: 20rpx;
        border-bottom: solid 2rpx #e8e8e8;
        font-size: 36rpx;
        color: #111111;
      }

      .list {
        margin-bottom: 36rpx;
        border-bottom: solid 2rpx #e8e8e8;

        .item {
          display: flex;
          position: relative;
          padding: 30rpx 0;

          .preview {
            display: block;
            width: 188rpx;
            height: 188rpx;
            margin-right: 20rpx;
          }

          .main {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .info {
              .name {
                display: block;
                white-space: nowrap; /* 防止文本换行 */
                overflow: hidden; /* 隐藏溢出的部分 */
                text-overflow: ellipsis; /* 使用省略号代替溢出的文本 */
                width: 180px;
                font-size: 32rpx;
                font-weight: 400;
                color: #333333;
              }

              .size {
                font-size: 24rpx;
                font-weight: 400;
                color: #8e8e8e;
              }
            }

            .price {
              font-size: 32rpx;
              font-weight: bold;
              color: #343434;
            }
          }

          .buy-num {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 28rpx;
            font-weight: 400;
            color: #8e8e8e;
          }
        }
      }

      .delivery {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        .label {
          display: block;
          flex: 1;
          width: 35%;
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }

        .value {
          width: 60%;

          font-size: 28rpx;
          font-weight: 400;
          color: #111111;
          font-weight: bold;
          text-indent: 2em;
        }
      }

      .discount {
        display: flex;
        align-items: center;
        margin-bottom: 38rpx;

        .name {
          flex: 1;
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
        }

        .price {
          font-size: 28rpx;
          font-weight: 400;
          color: red;
        }
      }

      .pay {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;

        .name {
          display: block;
          margin-right: 10rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #343434;
        }

        .price {
          font-size: 36rpx;
          font-weight: 500;
          color: red;
        }
      }
    }

    .order-info {
      width: calc(100% - 64rpx);
      margin: 0 32rpx 20rpx 32rpx;
      padding: 52rpx 30rpx 1rpx 30rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 8rpx;

      .title {
        margin-bottom: 36rpx;
        padding-bottom: 20rpx;
        border-bottom: solid 2rpx #e8e8e8;
        font-size: 36rpx;
        font-weight: 800;
        color: #111111 !important;
      }

      .list {
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;

          .label {
            font-size: 28rpx;
            font-weight: 400;
            color: #333333;
          }

          .value {
            font-size: 28rpx;
            font-weight: 400;
            color: #8e8e8e;
          }
        }
      }
    }

    .order-pay {
      display: flex;
      align-items: center;
      position: fixed;
      left: 0;
      bottom: calc(1rpx + env(safe-area-inset-bottom));
      width: 100%;
      height: 50px;
      padding: 0 32rpx;
      background-color: #ffffff;
      box-sizing: border-box;

      .total {
        display: flex;
        align-items: center;
        flex: 1;

        .pay {
          .price {
            font-size: 35rpx;
            font-weight: 400;
            color: red;
          }
          .name {
            font-size: 24rpx;
            font-weight: 700;
            color: #333333;
          }
        }
      }

      .btn {
        display: flex;
        z-index: 999999;
        width: 100%;
        margin-top: 30px;
        justify-content: flex-end;

        .go-pay {
          margin-left: 15px;
          margin-right: 15px;

          width: 85px;
        }
      }
    }
  }
}
</style>